<template>
  <div :class="['button',{'disabled':loading}]" :style="styles" @click="onClick">
    <span :style="`font-size:${fontSize}px`">
      <SvgIcon class="mr-5" v-if="icon" :type="icon" />
      <slot></slot>
    </span>
  </div>
</template>
<script>
export default {
  name: "Button",
  props: {
    height: {
      type: [Number, String],
      default: 32
    },
    icon: String,
    loading: Boolean,
    fontSize: {
      type: [Number, String],
      default: 14
    },
    color: {
      type: String,
      default: "rgba(42, 205, 207, 1)"
    }
  },
  computed: {
    styles() {
      return `height:${this.height}px;line-height:${this.height}px;background:${this.color}`;
    }
  },
  methods: {
    onClick() {
      //这个此刻注意
      if (this.loading) return;
      this.$emit("on-click");
    }
  }
};
</script>
<style lang="stylus" scoped>
.button {
  width: 100%
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2)
  border-radius: 2px
  cursor: pointer
  user-select: none
  text-align: center
  span {
    color: #FFFFFF
  }
}
.button.disabled {
  background: #c5c8ce
  cursor: no-drop // 鼠标悬浮禁用
}
</style>